// 项目审批历史
<template>
  <div class="app-container">
    <vxe-table
      v-loading="loading"
      :data="historyData"
      border="none"
      highlight-hover-row
      show-header-overflow
      show-overflow
      align="center"
      :header-cell-style="{ background: '#F7F7F8', color: '#606266' }"
      @cell-dblclick="cellDblclick"
    >
  <!-- <el-table v-loading="loading" show-overflow-tooltip="true" :data="historyData" style="width: 100%;" :header-cell-style="{background:'#F7F7F8',color:'#606266'}"> -->
    <vxe-table-column prop="progress" label="进度" width="200" align="center"> </vxe-table-column>
    <vxe-table-column prop="result" label="处理结果" width="80" align="center"> </vxe-table-column>
    <!-- <vxe-table-column prop="opinion" label="说明" align="center"> </vxe-table-column> -->
    <vxe-table-column prop="opinion" label="说明" align="center" >
      <template slot-scope="scope">
        <span v-if="scope.row.opinion === '项目历史'">
          <el-button type="success" size="mini" @click="getTask(scope.row)">{{scope.row.opinion}}</el-button>
        </span>
         <span v-if="scope.row.opinion != '项目历史'">{{scope.row.opinion}}</span>
      </template>
    </vxe-table-column>

    <vxe-table-column prop="position" label="角色" width="150" align="center"> </vxe-table-column>
    <vxe-table-column prop="name" label="姓名" width="120" align="center"> </vxe-table-column>
    <vxe-table-column prop="taskCreateTime" label="任务创建时间" width="180" align="center"> </vxe-table-column>
    <vxe-table-column prop="taskProcessTime" label="任务处理时间" width="180" align="center" templet="#statusTpl"> </vxe-table-column>

  </vxe-table>

  <pagination style="float:right;" v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getList" />  </div>
</template>
<script type="text/html" id="statusTpl">
    <button >已关闭</button>
</script>
<script>
import { getApprovalHistory,getTask } from '@/api/project'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'Project',
  components: { Pagination },
    // 接受父组件的值
  props: {
     projectId: undefined
    },
  data() {
    return {
      historyData: [],
      total:0,
        listQuery: {
        pageNo: 1,
        pageSize: 10,
        id: undefined,
      },
      loading: true
    };
  },
  mounted() {
    this.listQuery.id = this.projectId
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      getApprovalHistory(this.listQuery)
        .then((data) => {
          this.historyData = data.data;
          this.total = data.total;
          console.log('响应数据:%o', data);
        })
        .catch((error) => {
          console.error('请求用户数据发生异常:' + error);
        });
        this.loading = false;
    },
    getTask(row) {
      this.$router.push({
        path: '/detail/projectDetail',
        query: { projectId: row.parentProjectInfo.id, projectStatus: row.parentProjectInfo.projectStatus,operationLook: true,taskStatus: 0,activeIndex: "1" },
      });
    },
     changePage() {
      this.getList();
    },
    cellDblclick({row,rowIndex,column,columnIndex,cell},event) {
      let _this = this;
      this.$copyText(event.target.innerText).then(function() {
        _this.$message.info('复制成功');
      });
    }
  },

};
</script>

<style lang="scss" scoped>
.toolbar-form {
  padding-top: 10px;
  padding-left: 10px;
}

.vxe-table {
  margin-left: 10px;
}

//修改toolbar的高度固定的问题
.vxe-toolbar {
  height: auto;
}
</style>
